* {
    margin: 0;
    padding: 0;
}

.top {
    /*高度800像数*/
    height: 800px;
    /*border边框   三个参数：像数  边框形状（实线，虚线，） 边框颜色*/
    /*border: 1px solid blue;*/

    background-image: url("../img/banner_qtah.jpg");
}

.top-logo .float-left {
    height: 141px;
}

.top-logo {
    width: 1000px;
    height: 141px;
    /*border: 1px solid red;*/
    margin: auto;
}

/*浮动到左边*/
.float-left {
    float: left;
}

/*图片浮动到右边*/
.float-right {
    float: right;
}

.top-logo-phone-div {
    /*line-height: 141px;*/
    margin-top: 55px;
}

.top-logo-phone {
    /*字体颜色*/
    color: white;
    line-height: 30px;
}


/*-----------------------top-nav-----------------------------------*/
.top-nav {
    height: 50px;
    background-color: #e69137;
}

/*选择top-nav 下面的ul*/
.top-nav ul {
    width: 1000px;
    margin: auto;
    /*去掉点*/
    list-style: none;

}

/*对ul里面li进行操作*/
.top-nav ul li {
    float: left;
    /*margin: shang  you xia zuo;*/
    /*margin:  shangxia  zuoyou;*/
    /*margin: sizhou;*/
    /*margin: 0 20px;*/
    padding: 0 20px;
    line-height: 50px;
}

.top-nav ul li:hover {
    background-color: darkolivegreen;
}

/*------------广告-----------------*/
.top-ad {
    width: 1000px;
    margin: auto;
    height: 600px;
    /*border: 1px solid red;*/
    color: white;
    line-height: 40px;
}

.top-ad {
}

/*p:nth-child(1)取得p标签下面的第一个元素*/
.top-ad p:nth-child(1) {
    margin-top: 50px;
    font-size: 40px;
}

.top-ad p:last-child {
    font-size: 30px;
}

/*奇数odd偶数even*/
.top-ad p:last-child span:nth-child(even) {
    font-size: 35px;
    color: #e69137;
}

.top-ad p:last-child span:last-child {
    line-height: 70px;
    font-size: 35px;
    color: #e69137;
    /*em相对于后面字体的大小*/
    text-indent: 2em;
}

/*-------------中间内容--------------------------*/
.middle {
    /*height: 200px;*/
    /*border: 1px solid red;*/
    /*!*宽度 200像素*!*/
    /*width: 200px;*/
    /*!*背景颜色*!*/
    /*background-color: yellow;*/
    /*!* margin div居中*!*/
    /*margin: auto;*/
    /*!*字体居中*!*/
    /*text-align: center;*/
    /*!* 字体上下居中*!*/
    /*line-height: 200px;*/

}

/*中间内容居中*/
.middle-content {
    width: 1000px;
    /*margin: auto;*/
    /*    让div上下都有50像素的空白*/
    /*margin-top: 50px;*/
    /*margin-bottom: 50px;*/
    margin: 50px auto;
    /*border: 1px solid blue;*/
    height: 250px;

}

/*当没有设置宽度时，宽度为100%，如果设置了浮动，宽度就为0*/
/*中间内容左边的新闻动态*/
.middle-content-left {
    border: 1px solid silver;
    height: 260px;
    width: 58%;
}

/*中间内容右边的产品展示*/
.middle-content-right {
    border: 1px solid silver;
    height: 260px;
    width: 40%;
}

/*左边新闻标题*/
.middle-content-left-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid silver;
    text-indent: 1em;
    color: #e69137;
}

/*左边新闻内容*/
.middle-content-left-content {
    height: 250px;
    /*border: 1px solid blue;*/

}

.middle-content-left-content img {
    padding: 15px;
    width: 100%;
    height: 100%;
}

.middle-content-left-content .float-left {
    width: 40%;
}

.middle-content-left-content .float-right {
    width: 50%;
    padding: 15px;
}

/*单行溢出，多行溢出*/
/*h5,p  逗号 和的意思*/
.middle-content-left-content h5, p {
    /*不能换行*/
    white-space: nowrap;
    /*    如果多余的用什么代替*/
    text-overflow: ellipsis;
    /*多余的隐藏*/
    overflow: hidden;

}

.middle-content-left-content h5 {
    line-height: 30px;
}

.middle-content-left-content p {
    line-height: 20px;
    color: gray;
    font-family: 仿宋;
}

/*这个>符号表示紧挨着的一级div*/
.middle-content-left-content .float-right > div {
    /*    下边框虚线*/
    border-bottom: 1px dashed silver;
}

/*-------------------右边产品信息------------------------*/
.middle-content-right-content > div {
    width: 40%;
}

.middle-content-right-content > div > div img {
    width: 100%;
    height: 100%;
}

.middle-content-right-content div div {
    padding: 10px 10px 0 10px;
}

/*---------------底部内容------------------*/
/*标签选择器，就是直接用标签作为css地址*/
hr {
    border: 2px solid #e69137;
}
/*底部内容居中*/
.foot-content {
    width: 1000px;
    margin: 0 auto 30px;
    line-height: 30px;
}